<template>
  <span class="cus-tag" :style="tagStyle" v-if="visible">
    <slot>{{ text }}</slot>
    <span v-if="closable" class="cus-tag-close" @click.stop="closeTag">×</span>
  </span>
</template>

<script setup lang="ts">
import { ref, computed, type CSSProperties } from 'vue'

interface CusTagProps {
  text?: string
  closable?: boolean
  type?: 'success' | 'danger' | 'warning' | 'info' | 'default'
}

const props = withDefaults(defineProps<CusTagProps>(), {
  type: 'default',
})

const visible = ref(true)

const tagStyle = computed<CSSProperties>(() => ({
  ...(props.type === 'success'
    ? { backgroundColor: '#f0f9eb', color: '#67c23a', border: '1px solid #b7eb8f' }
    : {}),
  ...(props.type === 'danger'
    ? { backgroundColor: '#fef0f0', color: '#f56c6c', border: '1px solid #fab6b6' }
    : {}),
  ...(props.type === 'warning'
    ? { backgroundColor: '#fdf6ec', color: '#e6a23c', border: '1px solid #f3d19e' }
    : {}),
  ...(props.type === 'info'
    ? { backgroundColor: '#f4f4f5', color: '#909399', border: '1px solid #d3d4d6' }
    : {}),
  ...(props.type === 'default'
    ? { backgroundColor: '#f4f4f5', color: '#606266', border: '1px solid #e0e0e0' }
    : {}),
  display: 'inline-flex',
  alignItems: 'center',
  borderRadius: '4px',
  padding: '0 8px',
  fontSize: '12px',
  lineHeight: '17px',
  border: '1px solid #e0e0e0',
  cursor: 'default',
  userSelect: 'none',
  height: '100%',
  minHeight: '17px',
  maxHeight: '28px',
}))

function closeTag() {
  visible.value = false
}
</script>

<style scoped>
.cus-tag-close {
  margin-left: 6px;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  transition: color 0.2s;
}
.cus-tag-close:hover {
  color: #f56c6c;
}
</style>
